<template>
  <view class="detail-container">
    <view class="menu-card">
      <view class="card-title">
        <uni-icons type="bars" size="18" color="#409eff"></uni-icons>
        <text>菜单信息</text>
      </view>

      <view class="info-list">
        <view class="info-item">
          <text class="label">菜单名称</text>
          <text class="value">{{ menuInfo.menuName }}</text>
        </view>
        <view class="info-item">
          <text class="label">菜单类型</text>
          <text class="value">{{ getMenuType(menuInfo.menuType) }}</text>
        </view>
        <view class="info-item">
          <text class="label">显示排序</text>
          <text class="value">{{ menuInfo.orderNum }}</text>
        </view>
        <view class="info-item" v-if="menuInfo.menuType !== 'F'">
          <text class="label">路由地址</text>
          <text class="value">{{ menuInfo.path || '-' }}</text>
        </view>
        <view class="info-item" v-if="menuInfo.menuType === 'C'">
          <text class="label">组件路径</text>
          <text class="value">{{ menuInfo.component || '-' }}</text>
        </view>
        <view class="info-item" v-if="menuInfo.menuType !== 'F'">
          <text class="label">菜单图标</text>
          <text class="value">{{ menuInfo.icon || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="label">显示状态</text>
          <text class="value" :class="menuInfo.visible === '0' ? 'text-success' : 'text-danger'">
            {{ menuInfo.visible === '0' ? '显示' : '隐藏' }}
          </text>
        </view>
        <view class="info-item">
          <text class="label">菜单状态</text>
          <text class="value" :class="menuInfo.status === '0' ? 'text-success' : 'text-danger'">
            {{ menuInfo.status === '0' ? '正常' : '停用' }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getMenu } from '@/api/system/menu'

export default {
  data() {
    return {
      menuInfo: {}
    }
  },
  onLoad(options) {
    if (options.menuId) {
      this.getDetail(options.menuId)
    }
  },
  methods: {
    async getDetail(menuId) {
      try {
        const res = await getMenu(menuId)
        if (res.code === 200) {
          this.menuInfo = res.data
        }
      } catch (error) {
      }
    },
    getMenuType(type) {
      const typeMap = {
        'M': '目录',
        'C': '菜单',
        'F': '按钮'
      }
      return typeMap[type] || '未知'
    }
  }
}
</script>

<style lang="scss">
// 可以复用之前的详情页样式
</style>